import React, { Component } from 'react'
import Breadcrumb from '../../base/Breadcrumb'
import Format from '../../base/Format'
import { withRouter } from 'react-router-dom'
import { Button, Message } from 'element-react'
import '../goods.css'
class GoodsFormatList extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      name: sessionStorage.productName,
      // 新增时候的数据参数
      format: [
        {
          name: "",
          values: []
        }
      ],
      // 编辑时候的数据参数
      editFormat:
      {
        specId: '',
        specName: '',
        values: []
      }
    }
  }
  componentDidMount() {
    if (this.props.match.params.id) {
      let productItem = JSON.parse(window.sessionStorage.getItem('productItem'))
      this.state.editFormat.specId = productItem.id
      this.state.editFormat.specName = productItem.value
      for (let i = 0; i < productItem.values.length; i++) {
        this.state.editFormat.values.push({value: productItem.values[i].value, valueId: productItem.values[i].id})
      }
      this.setState({editFormat: this.state.editFormat})
    }
  }
  // 新增页面下才能添加规格模块
  newFormat () {
    this.state.format.push({name: '', values: []})
    this.setState({})
      format: this.state.format

  }
  // 获取子组件的数据
  getTags (tags, index) {
    // index存在代表是新增
    if (index + 1) {
      this.state.format.splice(index, 1, tags)
      this.setState({format: this.state.format})
      console.log(this.state.format)
    } else {
      this.setState({editFormat: tags})
      console.log(this.state.editFormat)
    }
  }
  submit () {
    if (this.props.match.params.id) {
      // 修改
      if (!this.state.editFormat.specName) {
        Message.error('规格名称不能为空')
        return
      }
      let editFormatItem = []
      editFormatItem.push(this.state.editFormat)
      this.$ajax.updateProductSpec(this.props.match.params.id, editFormatItem).then(res => {
        if (res.code === 200) {
          Message({
            message: '修改成功',
            type: 'success'
          })
          this.props.history.goBack()
        } else if (res.code === 30206) {
          Message({
            message: '除不可更改值不可修改，其余操作成功',
            type: 'success'
          })
          this.props.history.goBack()
        } else {
          Message.error(res.msg)
        }
      }).catch(() => {
        Message.error('网络错误')
      })
    } else {
      // 新增
      for (let i = 0 ; i < this.state.format.length ; i++) {
        if (this.state.format[i].name === '' || this.state.format[i].values.length === 0) {
          Message.error('请填写完整信息')
          return
        }
      }
      let productId = window.sessionStorage.getItem('productId')
      this.$ajax.addProductSpec(productId, this.state.format).then(res => {
        if (res.code === 200) {
          Message({
            message: '创建成功',
            type: 'success'
          })
          this.props.history.goBack()
        } else {
          Message.error(res.msg)
        }
      }).catch(() => {
        Message.error('网络错误')
      })
    }
  }
  render() {
    let formatItem;
    if (this.props.match.params.id) {
      formatItem = (<Format id={this.props.match.params.id}  formatItem={this.state.editFormat} getTags={this.getTags.bind(this)}/>)
    } else {
      formatItem = (
        this.state.format.map((a, index) => {
          return <Format key={index} num={index} formatItem={a} getTags={this.getTags.bind(this)}/>
        })
      )
    }
    return (
      <div className="goodsFormatList">
        <Breadcrumb data={this.props.match.params.id ? ['商品管理', '商品规格', '编辑'] : ['商品管理', '商品规格', '新增']}/>
        <div className="title">产品名称：<span>{this.state.name}</span>
        </div>
        {
          this.props.match.params.id ? '' : <div><button className="btn-increase" onClick={this.newFormat.bind(this)}>新增规格</button></div>
        }
        {formatItem}
        <div className="height20"></div>
        <Button type="success" size="large" onClick={this.submit.bind(this)}>保存</Button>
      </div>
    );
  }
}

export default withRouter(GoodsFormatList)